import styled from 'styled-components'
/*
width: '100%',
height: '100%',
backgroundColor: '',
wrapWidth: '',
wrapHeight: '',
wrapBackgroundColor: '',
wrapBorder:'',
wrapBorderRadius: '',

img:img,
imgWidth:'',
imgHeight: '',
imgBackgroundColor: '',
imgRadius:'',
imgMargin:'',

title:'成功',
titleWidth:'',
titleHeight: '',
titleSize:'',
titleColor:'',
titleRadius:'',
titleBackgroundColor:'',

infomation: '2小时到账',
infoWidth:'',
infoHeight: '',
infoSize:'',
infoColor:'',
infoRadius:'',
infoBackgroundColor:'',

notHidden: false,
showTime: 1000,
display: 'flex',
didHiddenView:null,
*/ 
const SplashscreenStyled = styled.div`
  overflow: hidden;
  width: ${props => props.width ? props.width : '100%'};
  top: ${props => props.notShowNavBar ? 0 : '.44rem'};
  height: ${props => props.height ? props.height : 'calc(100% - .44rem)'};
  position: absolute;
  z-index: 9;
  background-color: ${props => props.backgroundColor ? props.backgroundColor : '#fff'};
  display: ${
    (props) => {console.log(props); return (props.display ? props.display:'none')}
  };
  flex-direction: column;
  justify-content: center;
  align-items: center;
  div.splashwrap{
    width: ${props => props.wrapWidth ? props.wrapWidth : 'auto'};
    height: ${props => props.wrapHeight ? props.wrapHeight : 'auto'};
    background-color: ${props => props.wrapBackgroundColor ? props.wrapBackgroundColor : '#fff'};
    border: ${props => props.wrapBorder ? props.wrapBorder : 'none'};
    border-radius: ${props => props.wrapBorderRadius ? props.wrapBorderRadius : '.05rem'};
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    img{
      width: ${props => props.imgWidth ? props.imgWidth : 'auto'};
      height: ${props => props.imgHeight ? props.imgpHeight : 'auto'};
      background-color: ${props => props.imgBackgroundColor ? props.imgBackgroundColor : ''};
      border-radius: ${props => props.imgRadius ? props.imgRadius : '.05rem'};
      margin:${props => props.imgMargin ? props.imgMargin : ''};
    }
    p.title{
      width: ${props => props.titleWidth ? props.titleWidth : 'auto'};
      height: ${props => props.titleHeight ? props.titleHeight : 'auto'};
      background-color: ${props => props.titleBackgroundColor ? props.titleBackgroundColor : ''};
      border-radius: ${props => props.titleRadius ? props.titleRadius : ''};
      margin:${props => props.titleMargin ? props.titleMargin : ''};
      font-size:${props => props.itleSize ? props.itleSize : '.15rem'};
      color:${props => props.titleColor ? props.titleColor : '#0E0E0E'};
      line-height: ${props => props.titleLineHeight ? props.titleLineHeight : props.titleHeight||''};
    }
    p.info{
      width: ${props => props.infoWidth ? props.infoWidth : 'auto'};
      height: ${props => props.infoHeight ? props.infoHeight : 'auto'};
      background-color: ${props => props.infoBackgroundColor ? props.infoBackgroundColor : ''};
      border-radius: ${props => props.infoRadius ? props.infoRadius : ''};
      margin:${props => props.infoMargin ? props.infoMargin : ''};
      font-size:${props => props.itleSize ? props.itleSize : '.11rem'};
      color:${props => props.infoColor ? props.infoColor : '#C0C0C0'};
    
    }
  }

`
export default SplashscreenStyled